<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0 ,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>结算页面</title>
    <link href="/AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css"/>
    <link href="/basic/css/demo.css" rel="stylesheet" type="text/css"/>
    <link href="/css/cartstyle.css" rel="stylesheet" type="text/css"/>
    <link href="/css/jsstyle.css" rel="stylesheet" type="text/css"/>
    <link type="text/css" href="/css/hmstyle.css" rel="stylesheet"/>
    <script type="text/javascript" src="/js/address.js"></script>
    <script src="/layui/layui.js"></script>
    <script src="/js/common.js" type="text/javascript"></script>
    <link href="/layui/css/layui.css" type="text/css" rel="stylesheet">
</head>
<body>
<th:block th:include="header"/>
<div class="concent">
    <!--地址 -->
    <div class="paycont">
        <div class="address">
            <h3>确认收货地址 </h3>
            <div class="control">
                <div class="tc-btn createAddr theme-login am-btn am-btn-danger">使用新地址</div>
            </div>
            <div class="clear"></div>
            <ul>
                <div class="per-border"></div>

                <li class="user-addresslist " th:each="a:${addressList}" th:aid="${a.id}">
                    <div class="address-left">
                        <div class="user DefaultAddr">
                            <span class="buy-address-detail">
                   <span class="buy-user">[[${a.name}]] </span>
										<span class="buy-phone">[[${a.tel}]]</span>
										</span>
                        </div>
                        <div class="default-address DefaultAddr">
                            <span class="buy-line-title buy-line-title-type">收货地址：</span>
                            <span class="buy--address-detail">
								   <span class="province">[[${a.province}]]</span>
										<span class="city">[[${a.city}]]</span>
										<span class="dist">[[${a.area}]]</span>
										<span class="street">[[${a.address}]]</span>
										</span>
                            </span>
                        </div>
                        <ins class="deftip" th:if="${a.defaultAddress}==1">默认地址</ins>
                    </div>
                    <div class="clear"></div>
                    <div class="new-addr-btn">
                        <a href="#" class="hidden">设为默认</a>
                        <span class="new-addr-bar hidden">|</span>
                        <a href="#">编辑</a>
                        <span class="new-addr-bar">|</span>
                        <a href="javascript:;"  id="delAddrBtn">删除</a>
                    </div>
                </li>


            </ul>
            <div class="clear"></div>
        </div>
        <!--支付方式-->
        <div class="logistics">
            <h3>选择支付方式</h3>
            <ul class="pay-list">
                <li class="pay taobao"><img src="images/zhifubao.jpg"/>支付宝<span></span></li>
            </ul>
        </div>
        <div class="clear"></div>
        <!--订单 -->
        <div class="concent">
            <div id="payTable">
                <h3>确认订单信息</h3>
                <div class="cart-table-th">
                    <div class="wp">
                        <div class="th th-item">
                            <div class="td-inner">商品信息</div>
                        </div>
                        <div class="th th-price">
                            <div class="td-inner">单价</div>
                        </div>
                        <div class="th th-amount">
                            <div class="td-inner">数量</div>
                        </div>
                        <div class="th th-sum">
                            <div class="td-inner">金额</div>
                        </div>
                        <div class="th th-oplist">
                            <div class="td-inner">配送方式</div>
                        </div>
                    </div>
                </div>
                <div class="clear"></div>
                <tr class="item-list">
                    <div class="bundle  bundle-last">
                        <div class="bundle-main" th:each="c:${cartList}">
                            <ul class="item-content clearfix">
                                <div class="pay-phone">
                                    <li class="td td-item">
                                        <div class="item-pic">
                                            <a href="#" class="J_MakePoint">
                                                <img th:src="${c.imgPath}" class="itempic J_ItemImg"></a>
                                        </div>
                                        <div class="item-info">
                                            <div class="item-basic-info">
                                                <a href="#" class="item-title J_MakePoint" data-point="tbcart.8.11">[[${c.title}]]</a>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="td td-info">
                                        <div class="item-props">
                                            <span class="sku-line">口味：[[${c.taste}]]</span>
                                            <span class="sku-line">包装：[[${c.packages}]]</span>
                                        </div>
                                    </li>
                                    <li class="td td-price">
                                        <div class="item-price price-promo-promo">
                                            <div class="price-content">
                                                <em class="J_Price price-now">￥[[${c.price}]]</em>
                                            </div>
                                        </div>
                                    </li>
                                </div>
                                <li class="td td-amount">
                                    <div class="amount-wrapper ">
                                        <div class="item-amount ">
                                            <span class="phone-title"></span>
                                            <div class="sl">
                                                <!--                                                <input class="min am-btn" name="" type="button" value="-"/>-->
                                                <!--                                                <input class="text_box" name="" type="text" th:value="${c.amount}"-->
                                                <!--                                                       style="width:30px;"/>-->
                                                <!--                                                <input class="add am-btn" name="" type="button" value="+"/>-->
                                                <em tabindex="0" class="J_ItemSum number">[[${c.amount}]]件</em>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li class="td td-sum">
                                    <div class="td-inner">
                                        <em tabindex="0" class="J_ItemSum number">￥[[${c.totalPrice}]]</em>
                                    </div>
                                </li>
                                <li class="td td-oplist">
                                    <div class="td-inner">
                                        <span class="phone-title">配送方式</span>
                                        <div class="pay-logis">
                                            包邮
                                        </div>
                                    </div>
                                </li>

                            </ul>
                            <div class="clear"></div>

                        </div>
                    </div>
                </tr>
                <div class="clear"></div>
            </div>
        </div>
        <div class="clear"></div>
        <div class="pay-total">
            <!--含运费小计 -->
            <div class="buy-point-discharge ">
                <p class="price g_price ">
                    合计（含运费） <span>¥</span><em class="pay-sum">[[${sum.sum}]]</em>
                </p>
            </div>
            <!--信息 -->
            <div class="order-go clearfix">
                <div class="pay-confirm clearfix">

                    <div class="box">
                        <div tabindex="0" id="holyshit267" class="realPay"><em class="t">实付款：</em>
                            <span class="price g_price ">
                                    <span>¥</span> <em class="style-large-bold-red " id="J_ActualFee">[[${sum.sum}]]</em>
											</span>
                        </div>
                        <div id="holyshit268" class="pay-address">

                            <p class="buy-footer-address">
                                <span class="buy-line-title buy-line-title-type">寄送至：</span>
                                <span class="buy--address-detail">
								   <span id="memberProvince" class="province"></span>
												<span id="memberCity" class="city"></span>
												<span id="memberArea" class="dist"></span>
												<span id="memberAddress" class="street"></span>
												</span>
                                </span>
                            </p>
                            <p class="buy-footer-address">
                                <span id="memberName" class="buy-line-title">收货人：</span>
                                <span id="memberTel" class="buy-address-detail">
                                         <span class="buy-user"> </span>
												<span class="buy-phone"></span>
												</span>
                            </p>
                        </div>
                    </div>
                    <form id="form1" action="/order/save" method="post">
                        <input type="text" name="ids" id="ids" th:value="${param.ids}"/>
                        <input type="text" name="id" id="id" th:value="${cartList.get(0).id}"/>
                        <input type="text" name="addressId" id="addressId"/><!--th:value="${a.id}"-->
                        <div id="holyshit269" class="submitOrder">
                            <div class="go-btn-wrap">
                                <a id="J_Go" class="btn-go" tabindex="0"
                                   title="点击此按钮，提交订单">提交订单</a>
                            </div>
                        </div>
                    </form>
                    <div class="clear"></div>
                </div>
            </div>
        </div>

        <div class="clear"></div>
    </div>
</div>
<th:block th:include="footer"/>
<div class="theme-popover-mask"></div>
<div class="theme-popover">
    <!--标题 -->
    <div class="am-cf am-padding">
        <div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">新增地址</strong> / <small>Add
            address</small></div>
    </div>
    <hr/>
    <div class="am-u-md-12">
        <form class="am-form am-form-horizontal" lay-filter="addressform" method="post">

            <div class="am-form-group">
                <label for="user-name" class="am-form-label">收货人</label>
                <div class="am-form-content">
                    <input type="text" id="user-name" placeholder="收货人">
                </div>
            </div>

            <div class="am-form-group">
                <label for="user-phone" class="am-form-label">手机号码</label>
                <div class="am-form-content">
                    <input id="user-phone" placeholder="手机号必填" name="tel" type="email">
                </div>
            </div>

            <div class="am-form-group">
                <label for="user-phone" class="am-form-label">所在地</label>
                <div class="am-form-content address">
                    <select data-am-selected id="province">
                        <option value="浙江省">浙江省</option>
                        <option value="湖北省">湖北省</option>
                        <option value="山东省">山东省</option>
                    </select>
                    <select data-am-selected id="city">
                        <option value="温州市">温州市</option>
                        <option value="武汉市">武汉市</option>
                        <option value="青岛市">青岛市</option>
                    </select>
                    <select data-am-selected id="area">
                        <option value="瑞安区">瑞安区</option>
                        <option value="洪山区">洪山区</option>
                        <option value="城阳区">城阳区</option>
                    </select>
                </div>
            </div>
            <div class="am-form-group">
                <label for="user-phone" class="am-form-label">是否为默认地址</label>
                <div class="am-form-content address">
                    <select data-am-selected id="defaultAddress">
                        <option value="1">默认地址</option>
                        <option value="0">否</option>
                    </select>
                </div>
            </div>

            <div class="am-form-group">
                <label for="user-intro" class="am-form-label">详细地址</label>
                <div class="am-form-content">
                    <textarea class="" rows="3" id="user-intro" name="address" placeholder="输入详细地址"></textarea>
                    <small>100字以内写出你的详细地址...</small>
                </div>
            </div>

            <div class="am-form-group theme-poptit">
                <div class="am-u-sm-9 am-u-sm-push-3">
                    <div class="am-btn am-btn-danger close">
                        <input type="button" id="saveBtn" value="保存" style="background-color: #dd514c">
                    </div>
                    <div class="am-btn am-btn-danger close">
                        <input type="button" value="取消" style="background-color: #dd514c">
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<div class="clear"></div>

<script>
    layui.use(["layer", "form"], function () {
        var layer = layui.layer;
        var $ = layui.jquery;
        var form = layui.form;

        $(".user-addresslist").on("click", function () {
            var aid = $(this).attr("aid");
            // 将 aid 的值放在需要的位置
            $("#addressId").val(aid);
            // 例如将其放入控制台输出：
            // console.log(aid);
        });

        $(".user-addresslist").on("click", function () {
            var aid = $(this).attr("aid");
            // 将 aid 的值放在需要的位置
            $("#addressId").val(aid);
            $.post("/memberaddress/checkAddress/" + aid, function (address) {
                $("#memberProvince").html(address.province)
                $("#memberCity").html(address.city)
                $("#memberArea").html(address.area)
                $("#memberAddress").html(address.address)
                $("#memberName").html(address.name)
                $("#memberTel").html(address.tel)
            })
        });
        //给删除地址绑事件
        $("#delAddrBtn").on("click",function (){
            var id = $("#addressId").val();
            console.log(id)
            $.post("/memberaddress/deleteAddress/"+id,function (){
               layer.confirm("您确定要删除这个地址吗？");
               layer.msg("删除成功！");
            });
        })

        //给保存地址绑事件
        $("#saveBtn").on("click", function () {
            var data = {}
            data.province = $("#province").val();
            data.name = $("#user-name").val();
            data.tel = $("#user-phone").val();
            data.address = $("#user-intro").val();
            data.city = $("#city").val();
            data.area = $("#area").val();

            $.post("/memberaddress/add", data, function () {
                layer.closeAll();
            })
        })
        $("#J_Go").on("click", function () {
            $("#ids").val()
            $("#id").val()
            if($("#addressId").val()==null||$("#addressId").val()==""){
                layer.msg("请选择地址！");
                return;
            }
            $("#form1").submit()

        })


    });

</script>
<script>
    // 获取所有类名为"user-addresslist"的元素
    var addressListItems = document.querySelectorAll('.user-addresslist');
    // 为每个元素添加点击事件监听器
    addressListItems.forEach(function (item) {
        item.addEventListener('click', function () {
            // 移除其他兄弟元素的"defaultAddr"类
            addressListItems.forEach(function (sibling) {

            });
            // 给当前元素添加"defaultAddr"类
            item.classList.add('defaultAddr');
        });
    });
</script>
<script src="/layui/layui.js"></script>



</body>

</html>